<template>
  <div class="system-notice">
    <el-table
      :data="tableData"
      @row-click="doRowClick"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="100">
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容">
      </el-table-column>
      <el-table-column
        prop="sender"
        width="100"
        label="发件人">
      </el-table-column>
      <el-table-column
        prop="state"
        width="80"
        label="状态">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'SystemNotice',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        content: '你的店铺审核已通过！你现在可以继续当前的操作了你的店铺审核已通过！你现在可以继续当前的操作了你的店铺审核已通过！你现在可以继续当前的操作了你的店铺审核已通过！你现在可以继续当前的操作了你的店铺审核已通过！你现在可以继续当前的操作了',
        sender: '系统管理员',
        state: '未读'
      },
      {
        date: '2016-05-02',
        content: '你的店铺审核已通过！你现在可以继续当前的操作了',
        sender: '系统管理员',
        state: '未读'
      },
      {
        date: '2016-05-02',
        content: '你的店铺审核已通过！你现在可以继续当前的操作了',
        sender: '系统管理员',
        state: '未读'
      }]
    }
  },
  methods: {
    doRowClick (row, event, column) {
      this.$alert(`
        <p>发件时间: 2018年7月21日14:43:34</p>
        <p>发件人: 系统管理员</p>
        <p>消息详情: ${row.content}</p>
      `, '查看详情', {
        confirmButtonText: '关闭',
        beforeClose: (action, instance, done) => {
          event.target.parentNode.parentNode.lastChild.innerHTML = '&nbsp;&nbsp;&nbsp;已读'
          done()
        },
        dangerouslyUseHTMLString: true
      })
    }
  }
}
</script>

<style lang="stylus">
  .system-notice .cell
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
  .system-notice
    .el-table
      .el-table__row
        height: 48px
        overflow: hidden
        cursor: pointer
        th
          text-align: center
        tr
          height: 48px
          overflow: hidden
</style>

<style lang="stylus" scoped>
  @import "../assets/css/base.styl"
  .system-notice
    width: $width
    margin: 0 auto
    padding-left: 170px
    box-sizing border-box
    background-color: #fff
    min-height 800px
</style>
